<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>
  
  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d")

  // 顺时针的矩形
  ctx.moveTo(100, 50);
  ctx.lineTo(200, 50);
  ctx.lineTo(200, 150);
  ctx.lineTo(100, 150);
  ctx.lineTo(100, 50);
  
  // 逆时针的矩形
  // ctx.moveTo(150, 100);
  // ctx.lineTo(150, 200);
  // ctx.lineTo(250, 200);
  // ctx.lineTo(250, 100);
  // ctx.lineTo(150, 100);

  // 顺时针的矩形
  ctx.moveTo(150, 100);
  ctx.lineTo(250, 100);
  ctx.lineTo(250, 200);
  ctx.lineTo(150, 200);
  ctx.lineTo(150, 100);
  
  ctx.fill();

  ctx.stroke();

</script>
</html>